<template>
  <div style="position: relative">
    <Spin :withIcon="true" v-if="loading"></Spin>
    <div class="filter-line b-b-d flx-row-s-c" style="margin-bottom: 20px">
      <span class="item-name">发票类型</span>
      <Select v-model="invoiceType" style="width: 150px" clearable>
        <Option
          v-for="item in invoiceTypeList"
          :value="item.value"
          :key="item.value"
          >{{ item.name }}</Option
        >
      </Select>
      <span class="item-name">开具类型</span>
      <Select v-model="issuingType" style="width: 150px" clearable>
        <Option
          v-for="item in issuingTypeList"
          :value="item.value"
          :key="item.value"
          >{{ item.name }}</Option
        >
      </Select>
      <span class="item-name">发票抬头</span>
      <Input
          v-model.trim="header"
          placeholder=""
          maxlength="30"
          style="width: 150px"
      />
      <div
          class="user-strong-button line-button-size"
          style="margin: 0 10px 0 30px"
          @click="pageChange(1)"
      >
        搜索
      </div>
      <div class="user-normal-button line-button-size" @click="reset">重置</div>
    </div>

    <div class="listTable-area">
      <div class="filter-line search-result-line flx-row-s-c pub-m-t-10">
        <span class="c-g f-14"
          >搜索结果共<span class="c-black">{{
            total != null ? ` ${total} ` : ""
          }}</span
          >条</span
        >
        <div
          class="user-strong-button line-button-size"
          style="margin: 0 10px 0 30px"
          @click="createInfo"
        >
          添加发票信息
        </div>
      </div>
      <table class="table-area">
        <thead>
          <tr>
            <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
            <th><div class="line-style">发票抬头</div></th>
            <th><div class="line-style">开具类型</div></th>
            <th><div class="line-style">发票类型</div></th>
            <th><div class="line-style">操作</div></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              <div class="line-style" style="justify-content: center;">
                <span class="normal-f">{{ index + 1 + (page - 1) * pageSize }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{ item.header }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{
                  item.issuingType == 0 ? "个人" : "企业"
                }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f f-ell-sin">{{
                  item.invoiceType == 0 ? "增值税普通发票" : "增值税专用发票"
                }}</span>
              </div>
            </td>
            <td>
              <div class="line-style normal-f">
                <div class="form-font-button" @click="showUpdate(item.id)">
                  详情
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <Empty-State
        v-if="total != null && total == 0"
        content="未搜索到任何内容！"
      ></Empty-State>
      <div class="form-page-bottom-area flx-row-c-c">
        <Page
          :total="total"
          :current="page"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          show-elevator
          show-sizer
          show-total
        />
      </div>
    </div>

    <invoice-info-modal
      :show.sync="invoiceInfoModalShow"
      :type="1"
      @submit-success="getList"
    ></invoice-info-modal>
    <invoice-info-modal
      :show.sync="updateinvoiceInfoModalShow"
      :type="2"
      :id="updateId"
      @submit-success="getList"
    ></invoice-info-modal>
  </div>
</template>

<script>
import { getInvoiceInfoList } from "@/api/user";
export default {
  name: "VipInvoiceManagement",
  components: {
    invoiceInfoModal: () =>
      import("_c/modal/userModal/invoiceInfoModal/invoiceInfoModal"),
  },
  data() {
    return {
      loading: false,
      invoiceTypeList: [
        {
          name: "增值税普通发票",
          value: 0,
        },
        {
          name: "增值税专用发票",
          value: 1,
        },
      ],
      invoiceType: null,
      issuingTypeList: [
        {
          name: "个人",
          value: 0,
        },
        {
          name: "企业",
          value: 1,
        },
      ],
      issuingType: null,
      header: "",

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],

      // 编辑框
      invoiceInfoModalShow: false,
      updateinvoiceInfoModalShow: false,
      updateId: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 重置
    reset() {
      this.invoiceType = null;
      this.issuingType = null;
      this.header = "";
      this.page = 1;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let params = {
        header: this.header,
        invoiceType: this.invoiceType,
        issuingType: this.issuingType,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getInvoiceInfoList(params);
      if (res.code == 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 创建发票信息
    createInfo() {
      this.invoiceInfoModalShow = true;
    },
    // 发票信息详情
    showUpdate(id) {
      this.updateinvoiceInfoModalShow = true;
      this.updateId = id;
    },
  },
};
</script>

<style lang="scss" scoped>
.listTable-area {
  padding: 0 30px;
  position: relative;
  left: -30px;
  width: calc(100% + 60px);
  border-top: 20px solid #f3f6fb;
}
</style>
